<template>
  <div style="padding: 10px">
    <el-row style="margin-bottom: 8px" :gutter="32">
      <el-col span="12" >
        <el-card style="height: 110px;">
          <div style="display: flex; flex-direction: column; justify-content: space-between">
            <div style="margin-bottom: 14px">
              账户地址: <span style="color:#409eff; font-size: 18px; font-weight: 600;">{{address}}</span>
            </div>
            <div>
              账户秘钥: <span style="color:#409eff; font-size: 18px; font-weight: 600;">{{privateKey}}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col span="6">
        <el-card>
          <div>
            账户余额: <span style="color:#409eff; font-size: 18px; font-weight: 600;">{{balance}}</span>ETH
          </div>
          <div style="margin: 8px 0; display: flex; align-items: center">
            <el-button type="primary" @click="getBalance">更新账户余额</el-button>
            <span class="el-icon-s-finance" style="color: #409eff; cursor: pointer; margin-left: 8px" @click="transferMoney">测试币不够了? 点这里!</span>
          </div>
        </el-card>
      </el-col>
<!--      <el-col span="6"  v-if="showCreateAccount">-->
      <el-col span="6">
        <el-button type="primary" @click="createAnEthereumAccount">创建一个以太坊账户</el-button>
      </el-col>
    </el-row>




    <!--创建账户弹窗-->
    <el-dialog title="提示" :visible.sync="createAccountShow">
      <div>
        <div>创建成功！</div>
        <div>您的私钥是 <span style="color: #409eff; font-size: 18px; font-weight: 600;">{{privateKey}}</span></div>
        <div>您的地址是 <span style="color: #409eff; font-size: 18px; font-weight: 600;">{{address}}</span></div>
        <div>请妥善保存您的私钥和地址，一旦丢失，将无法找回您的账户!</div>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="createAccountShow = false">确定</el-button>
      </div>
    </el-dialog>
    <!--余额弹窗-->
    <el-dialog title="余额" :visible.sync="balanceShow" width="30%">
      <div>
        您的以太坊余额为 <span style="color: #409eff; font-size: 18px; font-weight: 600;">{{balance}}</span> ETH
      </div>
      <div slot="footer">
        <el-button type="primary" @click="balanceShow = false">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {createAccountApi, getBalanceApi, getRandomAccountApi, transferApi} from '@/api/web3js'
import {updateUserProfile, getUserProfile} from '@/api/system/user'
export default {
  data(){
    return {
      showCreateAccount: false, //是否显示开户按钮
      createAccountShow: false, //创建以太坊账户成功弹窗
      privateKey: '', //创建账户的私钥
      address: '', //创建账户的地址
      balance: 0, //账户余额ETH
      balanceShow: false, //显示账户余额弹窗
    }
  },
  methods:{
    //创建以太坊账户
    async createAnEthereumAccount(){
      const res = await createAccountApi()
      this.privateKey = res.data.privateKey
      this.address = res.data.address
      //保存地址私钥到个人信息
      await updateUserProfile({remark: `已开户: {"privateKey": "${res.data.privateKey}", "address": "${res.data.address}"}`})
      this.createAccountShow = true

    },
    //获取个人信息
    async getUserInfo(){
      const res = await getUserProfile()
      const remark = res.data.remark
      this.showCreateAccount = remark.indexOf('已开户') == -1
      const {address, privateKey} = await this.forMartAddressAnprivateKey()
      this.address = address || ''
      this.privateKey = privateKey || ''
      this.getBalance()
    },
    //提取个人私钥和地址
    async forMartAddressAnprivateKey(){
      const res = await getUserProfile()
      const remark = res.data.remark
      const regex = /\{.*\}/;
      const match = remark.match(regex);

      if (match) {
        const jsonStr = match[0];
        try {
          const obj = JSON.parse(jsonStr);
          return obj
        } catch (error) {
          throw new Error('无效的 JSON 对象字符串');
        }
      } else {
        this.$message.error('请先创建账户!')
        throw new Error('请先创建账户!');
      }
    },
    //查询账户余额
    async getBalance(){
      const res = await getBalanceApi(this.address)
      this.balance = res.data
    },
    //转账
    async transferMoney(){
      //获取随机主账户
      let randomAccount = await getRandomAccountApi()
      randomAccount = randomAccount.data
      //获取个人账户
      if(!this.address){
        this.$message.error('个人地址不存在，请先创建账户!')
        return
      }
      //转账
      const res = await transferApi({
        senderPrivateKey: randomAccount.privateKey,
        receiverAddress: this.address,
        amount: 1
      })
      if(res.code != 200){
        this.$message.error(res.msg)
        return
      }
      this.$message.success(res.msg)
      this.getBalance()

    }
  },
  created() {
    this.getUserInfo()
  }
}
</script>

<style scoped lang="scss">

</style>

